<!DOCTYPE html>
<html dir="ltr" lang="en-us">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable="no" />
    <title>Office UI Fabric</title>
    <link href="https://devofficecdn.azureedge.net/themes/DevOffice/Content/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <style type="text/css">
      body,
      html {
        margin: 0;
        padding: 0;
      }

      .loading {
        align-items: center;
        background-color: #faf9f8;
        display: flex;
        height: 100vh;
        justify-content: center;
      }
    </style>
  </head>

  <body>
    <div id="main">
      <div class="loading">
        <img
          class="loadingImage"
          src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/spinner.gif"
          alt="Loading"
          width="32"
          height="32"
        />
      </div>
    </div>

    <script type="text/javascript">
      var isLocal = location.hostname === 'localhost' || location.hostname.indexOf('ngrok.io') > -1;
      var isProduction = location.hostname === 'developer.microsoft.com' || getParameterByName('isProduction');
      var devhost = getParameterByName('devhost');
      var entryPointFilename = 'fabric-sitev5';
      var appPath = '';
      var Flight = {};
      // Suffix used on our built JS files. Starts out as .min.js, and if that fails to load,
      // switches to .js (non-min). This helps us determine whether to load the min or non-min
      // variants of the Monaco workers.
      var jsSuffix = '.min.js';

      // If the site is hosted, load the flight config script for production or dogfood
      if (devhost !== null) {
        if (devhost === '') {
          devhost = location.origin + location.pathname.replace('index.html', '');
        }
        appPath = devhost;
        Flight.baseCDNUrl = devhost;
        loadAppScripts();
      } else if (!isLocal) {
        // Update as new fabric versions and its documentation are supported
        var fabricVersions = [5, 6, 7];

        // Get fabricVer from URL param, session value, or latest version in array
        var fabricVersion = Number(
          getParameterByName('fabricVer') || window.sessionStorage.getItem('fabricVer') || fabricVersions[fabricVersions.length - 1]
        );

        // Set session value if it's in array
        if (fabricVersions.indexOf(fabricVersion) > -1) {
          window.sessionStorage.setItem('fabricVer', fabricVersion);
        }

        var prefixVer =
          fabricVersions.indexOf(fabricVersion) > -1 && fabricVersion !== fabricVersions.slice(-1)[0] ? 'v' + fabricVersion + '-' : '';
        // If a devhost is provided, override the config app path

        var configPrefix = 'fabric-website-' + prefixVer + (isProduction ? 'prod' : 'df');

        var configScript = ['https://fabricweb.azureedge.net/fabric-website/manifests/' + configPrefix + '.js'];

        loadScripts(configScript, function() {
          if (window.Flight) {
            appPath = window.Flight.baseCDNUrl;
            loadAppScripts();
          }
        });
      } else {
        appPath = location.origin + '/';
        loadAppScripts();
      }

      // Simple synchronous script loader with callback. Adapted from https://stackoverflow.com/questions/1866717
      function loadScripts(array, callback) {
        var loader = function(src, handler, failHandler) {
          var script = document.createElement('script');
          script.src = src;
          script.onload = script.onreadystatechange = function() {
            script.onreadystatechange = script.onload = null;
            handler();
          };

          script.onerror = function() {
            script.onerror = null;
            if (failHandler) {
              failHandler();
            }
          };

          var head = document.getElementsByTagName('head')[0];
          (head || document.body).appendChild(script);
        };
        (function run() {
          if (array.length != 0) {
            const scriptName = array.shift();
            loader(scriptName, run, function() {
              // Load failures may occur because the min version of the script doesn't exist.
              // Try loading the non-min version instead.
              jsSuffix = '.js';
              loader(scriptName.replace('.min.js', '.js'), run);
            });
          } else {
            callback && callback();
          }
        })();
      }

      function loadAppScripts() {
        var version = isLocal ? '.development.js' : '.production.min.js';
        var reactPath = '//cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react' + version;
        var reactDomPath = '//cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom' + version;

        var scripts = [reactPath, reactDomPath, appPath + entryPointFilename + jsSuffix];

        // Load React and app scripts
        loadScripts(scripts);

        // Required configuration to make Monaco work
        window.MonacoEnvironment = {
          // This is needed for cases where the JS files will be on a different domain (the CDN)
          // instead of the domain the HTML is running on. Web workers (used by Monaco) can't be
          // loaded by script residing on a different domain, so we use this proxy script on the
          // main domain to load the worker script. (Also do this with localhost/devhost for testing.)
          // https://github.com/microsoft/monaco-editor/blob/master/docs/integrate-amd-cross.md
          getWorkerUrl: function(workerId, label) {
            var workerName = label === 'typescript' || label === 'javascript' ? 'ts.worker' : 'editor.worker';
            return (
              'data:text/javascript;charset=utf-8,' +
              encodeURIComponent(
                'self.MonacoEnvironment = { baseUrl: "' + appPath + '" }; importScripts("' + appPath + workerName + jsSuffix + '");'
              )
            );
          }
        };
      }

      function getParameterByName(name, url) {
        if (!url) {
          url = location.href;
        }
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
          results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
      }
    </script>
  </body>
</html>
